<template>
  <page-header-wrapper>
    <a-card :bordered='false'>
      <div class='table-page-search-wrapper'></div>
      
      <div class='table-operator'>
        <a-button type='primary' icon='plus' @click='handleEdit()' v-action:addRole>新建</a-button>
      </div>
      
      <s-table ref='table' size='default' rowKey='id' :columns='columns' :data='loadData' showPagination='auto'>
        <span slot='roles' slot-scope='text'>
          <a-tag color='red' v-for='item in text' :key='item'>{{ item }}</a-tag>
        </span>
        
        <span slot='action' slot-scope='text, record'>
          <template>
            <a-button style='margin-right: 8px;' @click='handleEdit(record)' v-action:updateRole>编辑</a-button>
          </template>
        </span>
      </s-table>
    </a-card>
    <a-modal title='Title' :visible='editVisible' width='70%' @ok='handleSubmit' @cancel='handleModalCancel'>
      <a-form-model :model='editForm' :labelCol='{ span: 6 }' :wrapperCol='{ span: 14 }' destroyOnClose>
        <a-form-model-item
          label='角色名称'
          prop='name'
          :rules="{ required: true, message: '请输入角色名称', trigger: 'blur' }"
        >
          <a-input v-model='editForm.name' />
        </a-form-model-item>
        <a-form-model-item label='角色说明'>
          <a-textarea v-model='editForm.description' />
        </a-form-model-item>
        <a-form-model-item label='权限'>
          <a-row v-for='(permission, index) in permissionData' :key='`permission_${index}`'>
            <div v-if='permission.actions.length > 0'>{{ permission.title }}：
              <a-checkable-tag
                :checked='selectedActions.indexOf(action.id) > -1'
                @change='checked => handleActionChange(permission.name, action.id, checked)'
                v-for='(action, idx) in permission.actions'
                :key='`action_${idx}`'
              >
                {{ action.name }}
              </a-checkable-tag>
            </div>
          </a-row>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { RoleList, RoleAdd, RoleUpdate, RoleDestory, PermissionList } from '@/api/admin'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: '6%',
    sorter: true,
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '角色名称',
    dataIndex: 'name',
    width: '10%'
  },
  {
    title: '角色简介',
    dataIndex: 'description',
    width: '10%'
  },
  {
    title: '创建',
    dataIndex: 'created_at'
  },
  {
    title: '更新时间',
    dataIndex: 'updated_at'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '200px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'TableList',
  components: {
    STable
  },
  data() {
    this.columns = columns
    return {
      // 查询参数
      queryParam: {},
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return RoleList(requestParameters).then(res => {
          return res.data
        })
      },
      editVisible: false,
      editForm: {},
      permissionData: [],
      selectedActions: []
    }
  },
  created() {
    this.getPermission()
  },
  methods: {
    getPermission() {
      PermissionList({}).then(res => {
        this.permissionData = res.data
      })
    },
    handleEdit(row) {
      this.editVisible = true
      this.editForm = Object.assign({}, row)
      this.selectedActions = row ? row.permissions : []
    },
    handleModalCancel() {
      this.editForm = {}
      this.editVisible = false
    },
    handleSubmit() {
      this.editForm.permissions = this.selectedActions
      if (this.editForm.id) {
        RoleUpdate(this.editForm.id, this.editForm).then(res => this.success(res))
      } else {
        RoleAdd(this.editForm).then(res => this.success(res))
      }
    },
    success(res) {
      this.$notification.success({ message: res.msg })
      this.editVisible = false
      this.$refs.table.refresh(true)
    },
    handleActionChange(module, action_id, checked) {
      this.selectedActions = checked
        ? [...this.selectedActions, action_id]
        : [...this.selectedActions.filter(item => item !== action_id)]
    }
  }
}
</script>
